<template>
	<view>
		<view class="w-full text-center">
			<text class="">忘记密码</text>
		</view>
		<view class="p-4">
			<uv-steps current="active">
				<uv-steps-item title="步骤一"></uv-steps-item>
				<uv-steps-item title="步骤二"></uv-steps-item>
				<uv-steps-item title="步骤三"></uv-steps-item>
			</uv-steps>
			<uv-form ref="formRef" :model="entity" labelPosition="left" labelWidth="5rem">
				<template v-if="active == 0">
					<uv-form-item label="用户名" prop="username" borderBottom>
						<uv-input v-model="entity.username" border="none">
						</uv-input>
					</uv-form-item>
				</template>
				<template v-if="active == 1">
					<uv-form-item label="手机号" prop="phone" borderBottom>
						<uv-input v-model="entity.phone" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="真实姓名" prop="realName" borderBottom>
						<uv-input v-model="entity.realName" border="none">
						</uv-input>
					</uv-form-item>
				</template>
				<template v-if="active == 2">
					<uv-form-item label="新密码" prop="newPwd" borderBottom>
						<uv-input v-model="entity.newPwd" type="password" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="确认密码" prop="confirmPwd" borderBottom>
						<uv-input v-model="entity.confirmPwd" type="password" border="none">
						</uv-input>
					</uv-form-item>
				</template>
				<uv-form-item>
					<uv-button type="primary" :text="active < 2 ? '下一步' : '完成'" @click="nextStep"></uv-button>
				</uv-form-item>
			</uv-form>
		</view>
		<view>
			<uv-notify ref="notify"></uv-notify>
		</view>
	</view>
</template>

<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, getCurrentInstance } from 'vue';
import authService from "@/services/auth.service";
import { onShow, onLoad } from "@dcloudio/uni-app";

const entity = ref({});
const active = ref(0);
const formRef = ref();
const loading = ref(false);

const notify = ref();
const notifyConfig = ref({
	text: '',
	type: '',
});

onLoad(async (option) => {
	load(option);
});

const showNotify = (config) => {
	notifyConfig.value = config;
	notify.value.show({
		type: config.type,
		message: config.message,
	});
}

const showError = (message) => {
	showNotify({ message: message, type: "error" });
}

const load = async (option) => {
	const routeUsername = option && option.username;
	if (routeUsername) {
		entity.value.username = routeUsername;
	}
};

const nextStep = async () => {
	if (active.value == 0) {
		await checkUsername();
	} else if (active.value == 1) {
		await checkMainInfo();
	} else if (active.value == 2) {
		await resetPassword();
	}
};

const checkUsername = async () => {
	try {
		loading.value = true;
		if (!entity.value.username) {
			showError("请输入用户名");
			return;
		}

		const res = await authService.checkUsernameBeforeResetPassword(entity.value.username);
		if (res.data.data) {
			active.value++;
		} else {
			showError("用户名不存在");
		}
	} catch (err) {
		if (err.data && err.data.message) {
			showError(err.data && err.data.message);
		}
		throw err;
	} finally {
		loading.value = false;
	}
}

const checkMainInfo = async () => {
	try {
		loading.value = true;
		if (!entity.value.phone) {
			showError("请输入手机号");
			return;
		}
		if (!entity.value.realName) {
			showError("请输入真实姓名");
			return;
		}

		const res = await authService.checkMainInfoBeforeReset(entity.value);
		if (res.data.data == true) {
			active.value++;
		} else {
			showError("信息校验不通过");
		}
	} catch (err) {
		if (err.data && err.data.message) {
			showError(err.data && err.data.message);
		}
		throw err;
	} finally {
		loading.value = false;
	}
}

const resetPassword = async () => {
	try {
		loading.value = true;
		if (!entity.value.newPwd) {
			showError("请输入新密码");
			return;
		}
		if (!entity.value.confirmPwd) {
			showError("请输入确认密码");
			return;
		}
		if (entity.value.newPwd != entity.value.confirmPwd) {
			showError("两次密码输入不一致");
			return;
		}

		await authService.resetPassword(entity.value);
		showNotify({ message: "密码重置成功，请重新登录", type: "success" });
		uni.navigateTo({
			url: '/pages/login/login'
		});
	} catch (err) {
		if (err.data && err.data.message) {
			showError(err.data && err.data.message);
		}
		throw err;
	} finally {
		loading.value = false;
	}
}
</script>

<style lang="scss"></style>
